<template>
  <div id="header-bar"
       class="p-clear">
    <div class="p-left logo-content p-animation"
         :class="{'logo-small':!letfShow}"
         @click="toHome">
      <div class="logo-text"
           v-show="letfShow"></div>
      <div class="logo-icon"
           v-show="!letfShow"></div>
    </div>
    <div class="right-content p-animation"
         :class="{'right-large':!letfShow}">
      <!-- <table class="right-container p-animation">
        <tr>
          <td>
            <div class="menu-icon p-cursor p-left" @click="openLeft"></div>
            <div class="p-right">
              <table style="margin-right:20px;">
                <tr>
                  <td>
                    <div class="message-box" @click="gomessageBox" v-if="infoCount>0">
                      <span class="msg-num" v-if="infoCount>0">{{infoCount}}</span>
                    </div>
                  </td>
                  <td style="font-size:15px;position:relative">
                    <span style="  cursor: pointer" @click="editUser">{{userInfo.realName}}</span>， 您好！
                    <i
                      class="el-icon-switch-button logOut"
                      title="退出"
                      @click="logout"
                    ></i>
                  </td>
                </tr>
              </table>
            </div>
          </td>
        </tr>
      </table>-->
      <div class="right-container p-animation">
        <div class="p-left">
          <div class="menu-icon p-cursor"
               @click="openLeft"></div>
          <!-- <span class="systemName">等级医院评审辅助系统</span> -->
        </div>
        <div class="p-right right-box">
          <div class="message"
               @click="msgDialog">
            <i class="el-icon-message"></i>
            <div class="message-box">
              消息
              <div class="message-num"
                   v-if="infoCount>0">{{infoCount}}</div>
            </div>
          </div>
          <!-- <div class="user">{{userInfo.userName}}({{userInfo.realName}})</div> -->
          <div class="icon-box">
            <i class="el-icon-switch-button logOut"
               title="退出"
               @click="logout"></i>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible="msgVisible"
               width="30%"
               :modal="false"
               class="dialog-box"
               :before-close="msgDialogHandle"
               style="margin-right: 35px;">

      <div style="text-align:center;">
        <el-button type="primary">未读</el-button>
        <el-button type="default">已读</el-button>
      </div>
      <div style="padding:10px;">
        <ul>
          <li class='msg-item'>
            <span>xxx随访中xxxx异常,请查看</span>
            <span>2020-03-12</span>
          </li>
          <li class='msg-item'>
            <span>xxx随访中xxxx异常,请查看</span>
            <span>2020-03-12</span>
          </li>
        </ul>
      </div>
    </el-dialog>
    <!-- <div @click="send">发送</div> -->
  </div>
</template>

<script>
import { getInfos } from '../../utils/apis/commonApi'
// import { setNewToken, setNewIdenity } from '../../utils/publicFun'
// import { getToken } from '../../utils/apis/loginApi'
import baseInfo from '../../utils/config'

export default {
  name: 'headerBar',
  components: {},
  data () {
    return {
      msgVisible: false,
      userInfo: {
        realName: '',
        userName: '',
        userId: '',
        messageNum: 10
      },
      infoCount: 0,
      letfShow: true,
      interVal: null,
      path: `ws://${baseInfo.BASE_URL.split('//')[1]}socketServer`,
      socket: ''
    }
  },
  created () {
    // console.log(baseInfo.BASE_URL.split('//')[1])
    // this.userInfo.userName = JSON.parse(localStorage.userInfo).userName
    // this.userInfo.realName = JSON.parse(localStorage.userInfo).realName

    // this.getMyInfos()
    // if (localStorage.userInfo) {
    //   this.init()
    // }
    window.addEventListener('storage', e => {
      if (e.key !== 'lastTime') {
        location.reload()
      }
    })
    /* setInterval(function () {
      getToken({
        username: this.userName,
        password: this.passWord
      }).then(res => {
        if (res.status === 200) {
          setNewToken(res.data, 36000000 * 6)
          this.$router.push('/')
        }
      })
    }, */
    // this.$baseInfo.GET_TOKEN_AGIN)
    // this.listenOpera()
    // 1分钟验证一次是否未有用户行为
    /* setInterval(() => {
      let time = new Date().getTime()
      if (time > Number(localStorage.lastTime)) {
        this.logout()
      }
    }, 1000 * 60) */
  },
  methods: {
    msgDialogHandle () {
      this.msgVisible = false
    },
    msgDialog () {
      this.msgVisible = true
    },
    toHome () {
      this.$router.push('/')
    },
    logout () {
      localStorage.removeItem('userInfo')
      localStorage.removeItem('tokenInfo')
      localStorage.removeItem('menuTree')
      location.href = '/login'
    },
    openLeft () {
      this.letfShow = !this.letfShow
      this.$emit('getLeftShow')
    },
    getMyInfos () {
      if (localStorage.userInfo) {
        getInfos({
          userId: JSON.parse(localStorage.userInfo).userId
        }).then(res => {
          console.log(res)
          if (res.data.code === 200) {
            if (res.data.data !== null) {
              this.infoCount = res.data.data
            }
          }
        })
      }
    },
    gomessageBox () {
      this.$router.push('/reminder')
    },
    /* listenOpera () {
      document.body.onmousemove = () =>
        setNewIdenity(this.$baseInfo.LOGIN_OUT_TIME)
      document.body.onmousedown = () =>
        setNewIdenity(this.$baseInfo.LOGIN_OUT_TIME)
      document.body.onkeydown = () =>
        setNewIdenity(this.$baseInfo.LOGIN_OUT_TIME)
      document.body.onkeypress = () =>
        setNewIdenity(this.$baseInfo.LOGIN_OUT_TIME)
    }, */
    editUser () {
      this.$router.push({ name: 'editUser' })
    },
    init: function () {
      if (typeof WebSocket === 'undefined') {
        alert('您的浏览器不支持socket')
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.path)
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessage
      }
    },
    open: function () {
      console.log('socket连接成功')
    },
    error: function () {
      console.log('连接错误')
    },
    getMessage: function (msg) {
      console.log(msg)
      if (!isNaN(Number(msg.data))) {
        this.infoCount = Number(msg.data)
      }
    },
    send: function () {
      this.socket.send(JSON.stringify({ msg: '123' }))
    },
    close: function () {
      console.log('socket已经关闭')
    }
  },
  destroyed () {
    // 销毁监听
    // this.socket.onclose = this.close
  }
}
</script>

<style lang="less" scoped>
#header-bar {
  position: relative;
  .logo-small {
    width: 58px !important;
  }
  .logo-content {
    width: 180px;
    height: 50px;
    background: #007c90;
  }
  .logo-text {
    width: 180px;
    height: 100%;
    background-size: 150px;
  }
  .logo-icon {
    width: 58px;
    height: 50px;
    background-size: 80%;
  }
  .right-large {
    margin-left: 58px !important;
  }
  .right-content {
    background: #fff;
    margin-left: 180px;
    height: 50px;
    line-height: 50px;
    box-shadow: 0px 0px 5px #dedede;
    .right-container {
      vertical-align: middle;
      height: 100%;
      width: 100%;
      overflow: hidden;

      .menu-icon {
        margin-left: 10px;
        width: 20px;
        height: 28px;
        background: url("../../assets/image/icon-system.png") no-repeat center
          center;
        background-size: 100%;
        display: inline-block;
        vertical-align: middle;
      }
      .systemName {
        color: #31478f;
        font-size: 14px;
        // float: left;
        // height: 28px;
        // line-height: 28px;
        padding-left: 10px;
      }
      .right-box {
        display: flex;
        line-height: 30px;
        height: 30px;
        padding-right: 40px;
        margin-top: 10px;
        .message {
          margin-right: 10px;
          .message-box {
            display: inline-block;
            position: relative;
            margin-left: 10px;
            .message-num {
              position: absolute;
              background: #ff8c00;
              display: inline-block;
              color: #fff;
              font-size: 5px;
              width: 12px;
              text-align: center;
              height: 12px;
              line-height: 12px;
              border-radius: 50%;
              right: -7px;
              top: 1px;
              // transform: scale(0.5);
              cursor: pointer;
            }
          }
        }
        .user {
          padding-left: 50px;
          position: relative;
          color: #31478f;
          margin-right: 8px;
        }
        .user::after {
          display: block;
          content: "";
          width: 14px;
          height: 14px;
          background: rgba(49, 71, 143, 1);
          border: 1px solid rgba(255, 255, 255, 1);
          border-radius: 50%;
          position: absolute;
          left: 20px;
          top: 7px;
        }
        .user::before {
          display: block;
          content: "";
          left: 5px;
          top: 7.5px;
          width: 2px;
          height: 15px;
          background: rgba(49, 71, 143, 1);
          position: absolute;
        }
        .icon-box {
          line-height: 30px;
          padding-left: 10px;
          color: #31478f;
          position: relative;
        }
        .icon-box::after {
          display: block;
          content: "";
          left: 5px;
          top: 7.5px;
          width: 2px;
          height: 15px;
          background: rgba(49, 71, 143, 1);
          position: absolute;
        }
      }
      // .message-box {
      //   width: 18px;
      //   height: 24px;
      //   background: url("../../assets/image/icon-msg.png") no-repeat center
      //     center;
      //   background-size: 85%;
      //   margin-right: 20px;
      //   position: relative;
      //   cursor: pointer;
      //   .msg-num {
      //     position: absolute;
      //     background: #e32020;
      //     display: inline-block;
      //     color: #fff;
      //     font-size: 15px;
      //     width: 30px;
      //     text-align: center;
      //     height: 22px;
      //     line-height: 20px;
      //     border-radius: 50%;
      //     right: -12px;
      //     top: -5px;
      //     transform: scale(0.5);
      //     cursor: pointer;
      //   }
      //   animation: myAnimation 1.5s infinite;
      // }
    }
  }
  .logOut {
    font-weight: bold;
    cursor: pointer;
  }
  @keyframes myAnimation {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
}
</style>
<style lang="less">
.dialog-box {
  .el-dialog {
    margin-right: 35px !important;
  }
  .el-dialog__body {
    padding-top: 10px;
  }
}

.msg-item {
  line-height: 28px;
  margin-bottom: 5px;
}
</style>
